import { useSortable } from '@dnd-kit/sortable'
import { Button } from '@mui/material'
import { CSS } from '@dnd-kit/utilities'

export default function AssistantBtn(props: { children: React.ReactNode, id: string, variant: 'outlined' | 'contained' }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: props.id,
  })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

  return (
    <Button
      variant={props.variant}
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
    >
      {props.children}
    </Button>
  )
}
